<template>
  <div class="d-flex centent">
    <div class="input">
      <img src="./img/search-icon.png" alt="" class="search_icon" />
      <input
        type="text"
        title
        :placeholder="props.placeholder"
        v-model="state.value"
        @input="getInputValue"
      />
    </div>
    <div @click="clearValue" class="clear" v-if="state.value">清空</div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const props = defineProps({
  placeholder: {
    type: String
  }
});
const emit = defineEmits(["getBarInputValue"]);

const state = reactive({
  value: ""
});

onMounted(() => {
  if (route.query.keyword) {
    state.value = route.query.keyword;
  }
});

const getInputValue = () => {
  emit("getBarInputValue", state.value);
};
const clearValue = () => {
  state.value = "";
  emit("getBarInputValue", state.value);
};
</script>

<style scoped lang="less">
.centent {
  background: white;
  height: 1.3rem;
  position: relative;
  .goBack {
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    font-size: 12px;
    align-items: center;
  }
  .input {
    width: 100%;
    flex: 1;
    height: 36px;
    margin-top: 7px;
    border-radius: 5px;
    display: flex;
    justify-content: center;

    input {
      padding: 0 40px;
      height: 36px;
      width: 90%;
      border: none;
      font-size: 12px;
      background: none;
      background: #ededed;
      border-radius: 20px;
    }
  }

  .search_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .clear {
    position: absolute;
    top: 17px;
    right: 17px;
    padding: 0 10px;
    color: #1a6eff;
    font-size: 14px;
  }
}
input::-webkit-input-placeholder {
  font-size: 14px;
}
</style>
